<template>
	<view style="padding-bottom: 150rpx;" v-if="pageShow">
		<!-- 申请退款 -->
		<!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交物流,7=第三方退款中,8=退款失败 -->
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==0">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">等待商家处理</view>
				<view class="xiaobai strongtext margin_top">您已发起退款，等待商家处理！
				</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==1">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">等待买家寄回</view>
				<view class="xiaobai strongtext margin_top">卖家同意退款，请将包裹按照地址寄回！
				</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==2">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">卖家拒绝退款</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==3">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">申请平台介入</view>
				<view class="xiaobai strongtext margin_top">平台介入中，请耐心等待！
				</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==4">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">退款完成</view>
				<view class="xiaobai strongtext margin_top">退款成功，资金已原路返回，请注意查收！
				</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==5">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">退款已关闭</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==6">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">等待商家确认收货</view>
				<view class="xiaobai strongtext margin_top">商家确认收货会将您的金额退回！
				</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==7">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">第三方退款中</view>
				<view class="xiaobai strongtext margin_top">第三方退款中，请耐心等待！
				</view>
			</view>
		</view>
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==8">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">退款失败</view>
			</view>
		</view>
		<view class="mainpadding ffffff" v-if="dataAll.state==1">
			<view class="flexbetween">
				<view class="titletext sanshier fonweight">寄回地址</view>
				<view class="flexright" @click="copycontent">
					<u-icon name="点击复制" color="#1ba95b" size="16"></u-icon>
				</view>
			</view>
			<view class="flexleft margin_top">
				<view class="titletext sanshier fonweight margin_right2">{{dataAll.shopConfig.pt_return_name}}</view>
				<view class="strongtext">{{dataAll.shopConfig.pt_return_mobile}}</view>
			</view>
			<view class="strongtext margin_top">{{dataAll.shopConfig.pt_return_adress}}</view>
		</view>
		<view class="mainpadding ffffff " v-if="dataAll.state==6">
			<view class="flexbetween">
				<view class="titletext sanshier fonweight">快递公司</view>
				<view class="titletext sanshier fonweight">{{dataAll.express_name}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="titletext sanshier fonweight">快递单号</view>
				<view class="titletext sanshier fonweight">{{dataAll.express_no}}</view>
			</view>
		</view>
		<view class=""></view>
		<view class="mainpadding_top ffffff">
			<view class="flexbetween">
				<view class="shilitu margin_right2">
					<image :src="dataAll.goods.image_text" mode=""></image>
				</view>
				<view class="flexcolumn"
					style="width: 69%;align-items: flex-start;height: 160rpx;justify-content: space-between;">
					<view class="titletext xiaohei fonweight yhxk">{{dataAll.goods.title}}</view>
					<view class="flexbetween margin_top2" style="width: 100%;">
						<view class="flexleft">
							<view class="sanshier xiaohong fonweight">{{dataAll.score}}</view>
							<view class="strongtext xiaohong nofonweight">分</view>
							<view class="sanshier xiaohong fonweight" v-if="Number(dataAll.price)">+￥{{dataAll.price}}
							</view>
						</view>
						<view class="titletext">x{{dataAll.goods.number}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff" v-if="dataAll.reason">
			<view class="titletext sanshier fonweight">退款原因</view>
			<view class="strongtext margin_top">{{dataAll.reason}}</view>
			<view class="flexleft flex_wrap" v-if="dataAll.images_text.length">
				<view class="sanshis flexcenter margin_top2" v-for="(ite,inde) in dataAll.images_text" :key="inde">
					<view class="jiaolt">
						<image :src="ite" mode="" @click="lbtpriview(inde,dataAll.images_text)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="flexbetween margin_top">
				<view class="strongtext">退款金额：</view>
				<view class="strongtext">￥{{dataAll.price}}元</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">退回积分：</view>
				<view class="strongtext">{{dataAll.score}}分</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">申请时间：</view>
				<view class="strongtext">{{dataAll.createtime_text}}</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding" v-if="dataAll.state==0 || dataAll.state==1">
			<view class="flexright">
				<view class="baibtn" v-if="dataAll.state==0" @click="cancelitem(listid)">取消申请</view>
				<view class="lvbtn margin_left" v-if="dataAll.state==1" @click="show=true">填写单号</view>
			</view>
		</view>
		<u-modal :show="show" title="填写单号" confirmText="确认" @confirm="chongzhi" cancelText="取消" @cancel="chongzhicancel"
			showCancelButton>
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexbetween margin_top" @click="kdgsshow=true">
					<view class="main_size bold hei_text">快递公司：</view>
					<view class="flexright">
						<input type="text" class="textright" placeholder="请选择" disabled="" v-model="express_name">
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text">快递单号：</view>
					<input type="text" class="textright" placeholder="请输入" v-model="express_no">
				</view>
			</view>
		</u-modal>
		<u-picker :show="kdgsshow" :columns="kdgscolumns" keyName="name" confirmColor="#1BA95B" @confirm="kdgsconfirm"  @cancel="kdgsshow=false"></u-picker>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				pageShow: false,
				show:false,
				kdgsshow:false,
				kdgscolumns:[],
				express_name:"",
				express_no:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			kdgsconfirm(e){
				this.express_name = e.value[0].name
				
				this.kdgsshow = false
			},
			chongzhicancel() {
				this.show = false
			},
			chongzhi() {
				httpRequest.request('/api/scoregoods/toExpress', 'POST', {
					id:this.listid,
					express_name:this.express_name,
					express_no:this.express_no
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
					}
				})
				this.chongzhicancel()
			},
			copycontent() {
				let text = this.dataAll.shopConfig.pt_return_name + this.dataAll.shopConfig.pt_return_mobile + this.dataAll
					.shopConfig.pt_return_adress
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
					}
				});
			},
			shenqingsh(id) {
				uni.navigateTo({
					url: "/pages_mypage/shenqingsh?id=" + id + "&goods_id=" + this.dataAll.goods[0].id
				})
			},
			lbtpriview(index,arr) {
							var i = arr; //获取当前页面的轮播图数据
							//uniapp预览轮播图
							uni.previewImage({
								current: index, //预览图片的下标
								urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
							})
						},
			cancelitem(id) {
				httpRequest.modal('提示', '确认取消当前售后申请吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/scoregoods/closeRefund', 'GET', {
							id
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								this.getDetail()
							}
						})
					}
				})
			},
			returnpayway(val) {
				if (val == 0) return "余额支付"
				if (val == 1) return "微信支付"
				if (val == 2) return "支付宝支付"
			},
			getDetail() {
				httpRequest.request('/api/scoregoods/getRefundInfo', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.kdgscolumns = []
					this.kdgscolumns.push(res.data.kuaidi)
					this.pageShow = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-count-down__text {
		color: #ff0000
	}

	page {
		background-color: #f9f9f9;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>